<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tree Demo</title>
	<link rel="stylesheet" type="text/css" href="css/tree_core.css" />
	<script type="text/javascript" src="scripts/jquery.lib.js"></script>
	<script type="text/javascript" src="scripts/jquery.tree.core.js"></script>
	<script type="text/javascript" src="scripts/jquery.hotkeys-0.7.9.min.js"></script>
	<script type="text/javascript" src="scripts/jquery.tree.extend.js"></script>
	<script type="text/javascript">
	$(function() {
		$('#tree-panel .tree').tree({
		//this config just for a complicate tree, like has specify data sources, associate with content panel
		associate : true,
		events : {
			load	: 'note?type=read&id=',							//common no need, it same as data.url
			create	: 'note?type=create&id=',
			update	: 'note?type=update&id=',
			remove	: 'note?type=delete&id=', 		//like 'service?type=del&id='
			move	: 'note?type=move&id='
		}
		, data : {
			url : 'note?type=load&id=' 
		}
	});
});
	</script>
</head>
<body>
		<div id="tree-panel">
			<div class="menu">
				<a href="#" rel="create" title="Create"><img src="images/themes/default/create.png" alt="" /></a>
				<a href="#" rel="rename" title="Rename"><img src="images/themes/default/rename.png" alt="" /></a>
				<a href="#" rel="remove" title="Delete"><img src="images/themes/default/remove.png" alt="" /></a>
				<a href="#" rel="copy" title="Copy"><img src="images/copy.png" alt="" /></a>
				<a href="#" rel="cut" title="Cut"><img src="images/cut.png" alt="" /></a>
				<a href="#" rel="paste" title="Paste"><img src="images/paste.png" alt="" /></a>
			</div>
			<div class="tree">&nbsp;</div>
		</div>
		<div id="demo"></div>
</body>
</html>